<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* #can {
      width: 500px;
      height: 500px;
      background-color: orange;
    } */
  </style>
</head>
<body>

  <!-- canvas画布最大面积：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas -->

  <!-- 
    浏览器需要在canvas画布元素上进行图形化绘制 
    1. canvas标签是HTML5版本新增的标签
    2. 配合canvas标签元素，使用HTML5技术 JavaScript API（Canvas API）来绘制图形
  -->
  <!-- 
    canvas标签属性
    1. id => JavaScript要获取到canvas画布对象，并通过该DOM对象来创建绘制图形的上下文（绘制的方法和属性集合）
    2. width => 画布的宽度 默认值：300px
    3. height => 画布的高度 默认值：150px
    注意：画布的大小决定了Canvas API绘制图形的边界
  -->
  <!-- 使用canvas元素的宽高属性定义画布大小（推荐） -->
  <!-- <canvas id="can" width="500" height="500"></canvas> -->
  
  <!-- 使用CSS定义canvas标签的宽高属性（不推荐） -->
  <!-- 使用CSS定义尺寸可能会导致绘制的内容变形 -->
  <!-- <canvas id="can"></canvas> -->
  
  <!-- canvas是有兼容性的，不兼容就会渲染canvas标签内部的内容 -->
  <canvas id="can" class="can" width="500" height="500">
    您当前使用的浏览器不支持canvas元素
  </canvas>
    
  <script>
    // 1. 获取画布的元素
    // dom元素变量前面加小写的o，object
    // const oCan = document.getElementsByClassName('can')[0];
    // HTMLCanvasElement
    const oCan = document.getElementById('can');
    // const oCan = document.querySelector('#can');
    // console.log(Object.prototype.toString.call(oCan));
    
    // 2. 要使用当前画布对象，创建一个绘制图形的上下文
    // ctx => context
    // 如果无法创建上下文，那么则返回null
    /**
     * 参数：contenxtType, contextAttributes
     * 
     * contextType:
     *   1. 2d => 创建2d渲染的上下文
     *      绘制接口：CanvasRenderingContext2D => 所有的属性和方法
     * 
     *   2. webgl/webgl2 => 创建3d渲染的上下文
     *      绘制接口：WebGL(2)RenderingContext
     *      注意：webgl2是webgl的升级版本（增加了更多的API和配置）
     * 
     *   3. bitmaprenderer => 创建ImageBitMap替换canvas的上下文
     *      绘制接口：ImageBitMapRenderingContext
     * 
     * contextAttributes:
     *   alpha: true
     *     设置false: canvas背景不透明，加速渲染透明的图像或图形
     */
    // const ctx = oCan.getContext('2d', {
    //   alpha: false
    // });
    /**
     * ctx => 属性
     * CanvasRenderingContext2D => 方法 <= Canvas API的一部分
     */
    const ctx = oCan.getContext('2d');

    ctx.strokeRect(100, 100, 150, 100);
    
  </script>
</body>
</html>